<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.box{
			width: 100px;
			height: 100px;
			background-color: pink;
		}
		.box2{
			width: 100px;
			height: 100px;
			background-color:yellow;
		}
		/*.hide{
			display: none;
		}
		.show{
			display: block;
		}*/

	</style>
</head>
<body>
	<input type="button" value="点击按钮修改性别" id="btn">
	<input type="radio" value="1" name="sex" checked>男
	<input type="radio" value="2" name="sex" id="nv">女
	<input type="radio" value="3" name="sex">保密
	<br />
	<input type="button" value="点击按钮选取兴趣" id="btn1">
	<input type="checkbox" value="1" name="xingqu">吃饭
	<input type="checkbox" value="2" name="xingqu" id="ck1">睡觉
	<input type="checkbox" value="3" name="xingqu">打豆豆
	<input type="checkbox" value="4" name="xingqu" id="ck2">打篮球
	<input type="checkbox" value="5" name="xingqu">打足球

	<input type="button" id="btn3" value="点击按钮设置div宽高背景色">
	<div class="box" id="box">
		我是盒子
	</div>

	<!-- 点击按钮设置div隐藏 -->
	<input type="button" value="隐藏" id="btn4">
	<div id="box2">我是盒子二</div>
	<script>
		var btn = document.getElementById('btn');
		var nv = document.getElementById("nv");
		var btn1 = document.getElementById("btn1");
		var ck1 = document.getElementById("ck1");
		var ck2 = document.getElementById('ck2');
		var btn3 = document.getElementById('btn3');
		var box = document.getElementById('box');
		var btn4 = document.getElementById('btn4');
		var box2 = document.getElementById('box2');
		btn.onclick = function(){
			nv.checked = true
		}

		btn1.onclick = function(){
			ck1.checked = true;
			ck2.checked = true;
		}
		btn3.onclick = function(){
			box.style.width="400px";
			box.style.height = "400px";
			//凡是在js中操作dom元素 设置样式中有带 ——  的 都转换成daxie的字母 类似 background-color  将其转成backgroundColor
			box.style.backgroundColor = "red"; 

		}

		btn4.onclick = function(){
			// box2.style.display = "none"

			// if(this.value == "隐藏"){
			// 	this.value  = "显示"
			// 	box2.style.display = "none"

			// }else{
			// 	this.value  = "隐藏"
			// 	box2.style.display = "block"
			// }


			if(this.value == "隐藏"){
				this.value  = "显示"
				//class是关键字 应该使用className 在js中
				box2.className = "box2"

			}else{
				this.value  = "隐藏"
				box2.className = ""
			}


		}

	</script>
</body>
</html>